<template>
  <div class="hello">
    {{ msg }}
    <div>
      <!-- 单行一句都可以实现 -->
      <h3>{{ hello }}-{{ num+10 }}</h3>
      <div v-html="url"></div>
      <div v-bind:id="pid">pid</div>
      <div v-bind:class="active">active</div>
      <div>{{ 10 > 5 ? '正确' : "错误" }}</div>
      <div>{{ message.split('').reverse().join('') }}</div>

      <div v-if="flag">我是v-if指令:我是齐天大圣孙悟空</div>
      <div v-else>我是v-if指令:瞎说，你是假的六耳猕猴</div>

      <template v-if="flag">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
      </template>

      <div v-show="flag">我是show</div>

      <div>
        <!-- 列表处理:数组 -->
        <ul>
          <li v-for="(item,index) in names" v-bind:key="item.id">{{ item.name }} - {{ index }}</li>
        </ul>
      </div>
      <div>
          <!-- 处理对象:对象 -->
          <span v-for="(value,key,index) in myObj" v-bind:key="index">{{ value }}-{{ key }}-{{ index }},</span>
      </div>
    </div>

    <!-- 事件 -->
    <div>
        <button v-on:click="clickHandler('hello',$event)">按钮</button>
        <button v-on:click="counter+=1">Add</button>
        <span>{{ counter }}</span>
    </div>

    <div>
        <ul>
            <li v-on:click.prevent="listHandler(index,$event)" v-for="(item,index) in names" v-bind:key="item.id">{{ item.name }}</li>
        </ul>
    </div>
    <div>
        <a v-on:click.prevent="aHandler" href="http://www.baidu.com">哈哈</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      hello: "hello world",
      num: 10,
      url: "<a href='http://www.iwenwiki.com'>iwen</a>",
      pid: "pid1",
      active: "active-my",
      message: "iwen",
      flag: false,
      names: [
        {
          id: "1001",
          name: "iwen"
        },
        {
          id: "1002",
          name: "ime"
        },
        {
          id: "1003",
          name: "frank"
        }
      ],
      myObj:{
          name:"iwen",
          age:20
      },
      counter:0
    };
    
  },
  methods:{
      clickHandler(data,event){
          console.log(data);
          console.log(event);
      },
      listHandler(index,event){
        //   event.preventDefault();
          console.log(this.names[index].name);
          console.log(event);
      },
      aHandler(){
          console.log("dianji le ");
          
      }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
